<template>
  <el-dialog class="t-dialog-box" :width="width" :top="top" :show-close="false" destroy-on-close v-model="dialogVisble" @closed="close">
    <template #header>
      <div class="dialog-box flex-between">
        <div class="dialog-title">{{ title }}</div>
        <div class="icon-my-close-000 icon-image" @click="close"></div>
      </div>
    </template>
    <div class="t-dialog-body scroll-bar">
      <slot></slot>
    </div>
    <template #footer>
      <slot name="footer" :close="close">
        <div class="dialog-footer">
          <el-button type="primary" plain @click="confirm">保存</el-button>
          <el-button type="success" plain @click="close">退出</el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  width: {
    type: String,
    default: '50%'
  },
  top: {
    type: String,
    default: '15vh'
  }
});
const emits = defineEmits(['update:visible', 'confirm']);

const dialogVisble = computed({
  get() {
    return props.visible;
  },
  set(val) {
    return;
  }
});
/**
 * 确定事件
 */
const confirm = () => {
  emits('update:visible', false);
  emits('confirm');
};
/**
 * 关闭事件
 */
const close = () => {
  emits('update:visible', false);
};
</script>
